<!-- 当前客户端 -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px"> </el-row>
      <yg-table
        :columns="columns"
        :tableList="TableList"
        :height="'700'"
        :loading="loadingShow"
      >
        <el-table-column slot="action" label="登陆状态" width="150">
          <template slot-scope="scope">
            <div
              :class="scope.row.isLogin ? 'isLoginTrue' : 'isLoginFalse'"
            ></div>
          </template>
        </el-table-column>
        <el-table-column slot="action" label="是否在线" width="150">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isOnline">{{
              scope.row.isOnline ? "在线中" : "离线中"
            }}</el-tag>
            <el-tag type="danger" v-else>{{
              scope.row.isOnline ? "在线中" : "离线中"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column slot="action" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteUser(scope.row)"
              size="mini"
              v-has="'del'"
            ></el-button>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
  </div>
</template>
<script>
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";

export default {
  name: "ParamClientId",
  components: {
    YgTable,
    YgFrom,
  },
  data() {
    //这里存放数据
    return {
      columns: [
        {
          prop: "clientId",
          label: "客户端id",
          align: "left",
        },
        {
          prop: "update_time",
          label: "连接时间",
          align: "left",
        },
        // {
        //   prop: "isLogin",
        //   label: "是否登录",
        //   formatter(row) {
        //     if (row.hasOwnProperty("isLogin")) {
        //       return (row.isLogin = true ? "上线" : "离线");
        //     } else {
        //       return "";
        //     }
        //   },
        // },
        {
          prop: "username",
          label: "登录用户",
        },
        { slot: "action", align: "center" },
      ],
      TableList: [],
      loadingShow: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    deleteUser(id) {
      this.$confirm(
        `将要踢除登录名为:${id.username}的用户吗？是否确定踢除?`,
        "踢除用户",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1021,
            funCode: 1,
          };
          newMsg.data = { clientId: id.clientId };
          publishMsg(newMsg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消踢除",
          });
        });
    },
    onMessage(topic, msg) {
      // this.YgHome.onMessage(topic, msg);
      //console.log("正在监听--当前客户端页面");
      // console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1021:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.TableList = msg.data;
                this.loadingShow = false;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("踢除用户成功!");
                }
              } else {
                console.log("checkSpecialId false");
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //this.Onmessage();
    setMessageCallback(this.onMessage);
    publishMsg({
      webMsgType: 1021,
      funCode: 0,
    });
    this.loadingShow = true;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforedestroy() {}, //生命周期 - 销毁完成
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
.isLoginFalse {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
.isLoginTrue {
  width: 10px;
  height: 10px;
  background: rgb(79, 217, 15);
  border-radius: 50%;
}
</style>
